<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="userList"
      border
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column
        prop="userId"
        align="center"
        label="用户ID"
        fixed
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        align="center"
        label="用户名"
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        align="center"
        label="昵称"
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column prop="gender" align="center" label="性别" width="150">
      </el-table-column>
      <el-table-column
        prop="age"
        align="center"
        label="年龄"
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="所在地"
        sortable
        width="150"
      >
      </el-table-column>
      <el-table-column width="200" align="center" label="头像">
        <template slot-scope="scope">
          <!-- <img style="width: 120px; height: 120px" :src="scope.row.bannerUrl"> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.avatar"
            :preview-src-list="previewSrcList"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="isUseful"
        align="center"
        label="是否封禁"
        sortable
        width="150"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isUseful == 0" type="success">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="isSupper"
        align="center"
        label="是否成为会员"
        sortable
        width="150"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isSupper == 1" type="success">会员</el-tag>
          <el-tag v-else type="info">普通用户</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderNumber"
        align="center"
        label="订单数量"
        width="150"
      >
      </el-table-column>
      <el-table-column align="center" label="注册日期" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
          {{ scope.row.gmtCreate }}</template
        >
      </el-table-column>
      <el-table-column align="center" label="操作" width="210" fixed="right">
        <template slot-scope="scope" align="center">
          <el-button
            type="danger"
            v-if="scope.row.isUseful == 0"
            width="70"
            size="mini"
            @click="handleForbid(scope.$index, scope.row.userId)"
            >封禁</el-button
          >
          <el-button
            type="success"
            v-else
            width="70"
            size="mini"
            @click="handleRelease(scope.$index, scope.row.userId)"
          >
            解封
          </el-button>
          <!-- <el-button
            width="70"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row.userId)"
            >删除</el-button
          > -->
          <el-button
            width="70"
            size="mini"
            type="primary"
            @click="showInfo(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <div style="margin-top: 20px">
      <el-button @click="deleteSelect()">删除选中</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div> -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getUserPage"
    />
  </div>
</template>
  
  <script>
import user from "@/api/user";

export default {
  data() {
    return {
      userList: [],
      userQuery: {},
      ids: [],
      previewSrcList: [],
      current: 1, //页码
      limit: 4, //每页多少行
      total: 0, //总记录数,
      multipleSelection: [],
      // texts: ['英勇黄铜', '不屈白银', '荣耀黄金', '华贵铂金', '璀琛钻石']
    };
  },
  created() {
    this.getUserPage();
  },
  methods: {
    // 分页获取所有摄影师
    getUserPage(current = 1) {
      this.current = current;
      user.getUserPageVo(this.current, this.limit).then((res) => {
        this.previewSrcList = [];
        this.userList = res.data.userList;
        this.total = res.data.total;
        this.userList.forEach((user) => {
          this.previewSrcList.push(user.avatar);
        });
      });
    },

    showInfo(row) {
      this.$router.push({path: '/user/info', query:{ id: row.userId}})
    },

    // getBannerPageQuery(current = 1) {
    //   this.current = current
    //   banner.getBannerPageQueryVo(this.current, this.limit, this.bannerQuery).then(res => {
    //       this.previewSrcList = []
    //       this.bannerList = res.data.bannerList;
    //       this.total = res.data.total;
    //       this.bannerList.forEach((banner) => {
    //       this.previewSrcList.push(banner.bannerUrl)
    //     })
    //   });
    // },
    // // 获取所有轮播图
    // getAll() {
    //   banner.getAllBanner().then((res) => {
    //     this.previewSrcList = []
    //     this.bannerList = res.data.bannerList
    //   });
    // },
    // 反选和取消
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 批量删除
    deleteSelect() {
      this.ids = this.ids.sort((a, b) => a - b);
      this.$confirm("此操作将永久删除这些用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          user.deleteAllSelect(this.ids).then((res) => {
            if (res.success) {
              this.getUserPage();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    formatter(row, column) {
      return row.address;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map((res) => {
        return res.userId;
      });
    },

    // 封禁
    handleForbid(index, row) {
      this.$confirm("此操作将封禁该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          user.forbidUser(row).then((res) => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "封禁成功!",
              });
              this.getUserPage();
            } else {
              this.$message({
                type: "success",
                message: "封禁失败, 稍后再试",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消封禁",
          });
        });
    },

    handleRelease(index, row) {
      this.$confirm("此操作将解封该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          user.releaseUser(row).then((res) => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "解封成功!",
              });
              this.getUserPage();
            } else {
              this.$message({
                type: "success",
                message: "解封失败, 稍后再试",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解封",
          });
        });
    },

    // 删除单个
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          user.deleteOneById(row).then((res) => {
            if (res.success) {
              this.getUserPage();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "出现故障,请稍后",
                type: "failure",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // handleSearch(scope) {
    //   this.bannerQuery.bannerName = this.bannerName
    //   if (this.bannerName.length > 0) {
    //     this.getBannerPageQuery()
    //   } else {
    //     this.getBannerPage();
    //     this.$message({
    //       message: "您的搜索为空,搜索全部内容",
    //       type: "info",
    //     });
    //   }
    //   this.bannerName = ''
    //   // this.bannerQuery.bannerName = ''
    // },
  },
};
</script>
  
  <style>
el-table-column {
  align: center;
}
</style>
  